<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.chimera.org/chimera.tld" prefix="p"%>
<p:html titulo="DELICCIO :: Pedidos"
	javascript="sysRest,pedidos/pedidos" estilo="sysRest,pedidos/pedidos">
<div class="main"
	style="padding-top: 50px; display: inline-block; height: 810px; width: 100%; text-align: center;"
	align="center">
				<form id="formDelivery" action="<c:url value="pedidos/delivery"></c:url>" 	method="post">
	<div
		class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"
		align="center">DELIVERY (Si no llega, no come)</div>
	<br> <br>
	<div align="center"
		style="margin: auto; width: 1000px; display: inline-block; height: 400px;">
		<div
			style="width: 280px; height: 300px; display: inline-block; float: left; padding-right: 30px;">
			<div
				class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"
				align="center">Productos Disponibles</div>
			<div id="sortable1" class='dropfalse' style="overflow: scroll;">
				<c:forEach items="${lstProductos}" var="p">
					<c:if test="${p.id>0}">
					<div id="${p.id}" class="ui-state-default">
						<input type="hidden" id="id${p.id}" value="${p.id}"> <input
							type="hidden" id="nombre${p.id}" value="${p.nombre}"> <input
							type="hidden" id="tipo${p.id}" value="${p.idtipo.id}"> <input
							type="hidden" id="descripcion${p.id}" value="${p.descripcion}">
						<input type="hidden" id="precioUnitario${p.id}"
							value="${p.precioUnitario}"> <input type="hidden"
							id="precioConjunto${p.id}" value="${p.precioConjunto}"> <input
							type="hidden" id="estado${p.id}"
							value="${p.estadosgenerales.nombre}"> <input
							type="hidden" id="nombreFoto${p.id}" value="${p.foto.nombre}">
						<input type="hidden" id="rutaFoto${p.id}"
							value="${p.foto.ruta}/${p.foto.nombre}"> <input
							type="hidden" id="codigoFoto${p.id}" value="${p.foto.codigo}">
						<img alt="${p.foto.codigo}"
							src="<c:url value='${p.foto.ruta}/${p.foto.nombre}' />">						
					</div>
					</c:if>	
				</c:forEach>

			</div>
		</div>
		<div
			style="width: 280px; height: 300px; display: inline-block; float: left; padding-left: 30px;">
			<div
				class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"
				align="center">Productos Asignados</div>
			<div id="sortable2" class='droptrue' style="overflow: scroll;">
				<div class="ui-state-default" id="1" style="display: none;"></div>
			</div>
		</div>
		<div style="width: 350px; height: 300px; display: inline-block; float: left; padding-left: 30px;">
			<div
				class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"
				align="center">Ingrese su cantidad</div>
			<div id="pnlCantidades" class=''
				style="overflow: scroll; height: 300px; text-align: left;">
					<div id="productoSeleccionados"></div>
					<div id="pnlCant"></div>
					<input type="hidden" name="id" value="${cliente.id}"> 
					<input type="hidden"  id="latitudUbicacion" class="latitud" name="latitud" value=""> 
					<input	type="hidden" id="longitudUbicacion" class="longitud" name="longitud" value="">				
			</div>
		</div>
	</div>
	<br>
	<div align="center" style="margin: auto; width: 1000px; display: inline-block; height: 340px;">
		<div
			style="width: 300px; height: 300px; display: inline-block; float: left; padding-left: 30px;">
			<div
				class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"
				align="center">Detalle del Delivery</div>
			<div id="pnlMapa" class=""
				style="width: 300px; height: 300px; display: inline-block; float: left;">
				<div id="ubicaciones">
					<c:forEach items="${lstUbicaciones}" var="u">
						<div id="ubi${u.id}">
							<input type="hidden" id="ubicacion${u.id}" class="id" value="${u.id}"> 
							<input type="hidden" id="longitud${u.id}" class="longitud" value="${u.longitud}">
							<input type="hidden" id="latitud${u.id}" class="latitud" value="${u.latitud}">
						</div>
					</c:forEach>
				</div>		
				<div id="mapa" align="center" style="width: 300px; height: 300px;"></div>
			</div>
			<div id="pnlCalculo" class=""
				style="width:  300px; display: inline-block; float: left;"></div>
		</div>
		<div align="center" style="width: 300px; height: 300px; display: inline-block; float: left; padding-left: 30px;">
				
		<p>		
		 <label> Precio Total: </label>  <input id="txtTotal" type="text"  value=""  disabled="disabled"/> </p>
		<input type="button" class="btnGuardar" value="Delivery" />
		</div>
	</div>
	</form> 
</div>
</p:html>